<template>
  <div class="dashboard-container">
    <div
      v-loading.fullscreen.lock="loading"
      class="app-container"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      element-loading-spinner="el-icon-loading"
      element-loading-text="拼命加载中"
    >
      <el-card class="box-card">
        <tree-node :is-root="true" :tree-node="company" @addDepart="addDepart" />
      </el-card>
      <el-tree :data="departs" :default-expand-all="true" :props="defaultProps" class="el-tree">
        <template #default="{data}">
          <tree-node :tree-node="data" @addDepart="addDepart" @editDept="editDept" @getdepart="getdepart" />
        </template>
      </el-tree>
    </div>
    <diaLog
      ref="dialogForm"
      :dialog-visible.sync="dialogVisible"
      :tree-node="node"
      @getdepart="getdepart"
    />
  </div>
</template>

<script>
import treeNode from '@/views/departments/component/treenode'
import diaLog from '@/views/departments/component/dialog'
import { getDepartments } from '@/api/table'
import { getdataTree } from '@/utils/gettree'

export default {
  components: { treeNode, diaLog },
  data() {
    return {
      loading: false,
      node: {},
      dialogVisible: false,
      company: { name: '传智教育', manager: '负责人' },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      departs: [{ name: '总裁办', manager: '曹操', children: [{ name: '董事会', manager: '曹丕' }] },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }]
    }
  },
  created() { this.getdepart() },
  methods: {
    async getdepart() {
      this.loading = true

      // const aa = Loading.service({ text: '拼老命加载中...', spinner: 'el-icon-more' })
      const res = await getDepartments()
      // console.log(res)
      this.company = {
        name: res.companyName,
        manager: res.companyManage,
        id: ''
      }
      this.departs = getdataTree(res.depts)
      this.loading = false

      // aa.close()
    },
    async editDept(node) {
      // console.log(node)
      this.node = node
      await this.$refs.dialogForm.getDepartDetail(node.id)
      this.dialogVisible = true
    },
    addDepart(node) {
      this.node = node
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 835px;
  margin: 0 auto;
}

.box-card {
  background-color: #99ccff;
  width: 800px;
  margin: 0 auto;
  font-weight: bold;

}

;
</style>
